<template>
    <div id="position-detail">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="position-detail-note position-detail-note-left">Position: {{ position.position }}</div>
                    <div class="position-detail-note position-detail-note-right">Created Date: {{ position.created_at }}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="position-detail-note position-detail-note-left">
                        Expired
                        <el-switch
                                id="position-detail-expired"
                                v-model="expired"
                                on-color="#13ce66"
                                off-color="#ff4949"
                                on-text="YES"
                                off-text="NO"
                                @change="toggleExpired"
                        >
                        </el-switch>
                    </div>
                    <div class="position-detail-note position-detail-note-right" v-if="expired">Expired Date: {{ position.expiredTime }}</div>
                    <div id="position-detail-stamp" v-if="expired">
                        <img src="img/stamp.png">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <span class="position-detail-title">Reference: </span>
                    <span class="position-detail-content">{{ position.reference }}</span>
                    <span class="position-detail-title">Position: </span>
                    <span class="position-detail-content">{{ position.position }}</span>
                    <span class="position-detail-title">Reporting to: </span>
                    <span class="position-detail-content">{{ position.reportTo }}</span>
                    <span class="position-detail-title">Location: </span>
                    <span class="position-detail-content">{{ position.location }}</span>
                    <span class="position-detail-title">Type: </span>
                    <span class="position-detail-content">{{ position.type }}</span>
                    <span class="position-detail-title">Starting Date: </span>
                    <span class="position-detail-content">{{ position.startDate }}</span>
                    <span class="position-detail-title">Monthly Salary: </span>
                    <span class="position-detail-content">{{ position.monthlySalary }} RMB/Month</span>
                    <span class="position-detail-title">Benefits include: </span>
                    <span class="position-detail-content" v-html="position.benefits"></span>
                    <span class="position-detail-title">Responsibilities include but not limited to: </span>
                    <span class="position-detail-content" v-html="position.requirements"></span>
                    <span class="position-detail-title">Key requirements: </span>
                    <span class="position-detail-content" v-html="position.responsibility"></span>
                    <span class="position-detail-title">Job description: </span>
                    <span class="position-detail-content" v-html="position.description"></span>
                </div>
            </div>
            <el-button type="success" class="position-detail-edit" @click="editPosition">Edit</el-button>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import { Loading } from 'element-ui';
    export default {
        name: 'position-detail',
        data: function () {
            return {
                position: {},
                loading: Loading.service({ fullscreen: true, text: 'Loading' }),
                expired: false
            }
        },
        created () {
            this.getData()
        },
        methods: {
            getData () {
                this.getPositionsById(this, (data) => {
                    this.position = data[0]
                    this.expired =  (this.position.expired === 1)
                    this.loading.close()
                })
            },
            toggleExpired () {
                const options = {
                    id: this.$route.params.id
                }
                if (this.expired === false) {
                    options.expired = 0
                    options.expiredTime = ''
                    this.loading = Loading.service({ fullscreen: true, text: 'Loading' })
                    this.updatePosition(this, options, (data) => {
                        this.position = data
                        this.loading.close()
                    })
                }
                if (this.expired === true) {
                    options.expired = 1
                    let dateObj = new Date();
                    options.expiredTime = `${dateObj.getFullYear()}-${(dateObj.getMonth() + 1)}-${dateObj.getDate()}`
                    this.loading = Loading.service({ fullscreen: true, text: 'Loading' })
                    this.updatePosition(this, options, (data) => {
                        this.position = data
                        this.loading.close()
                    })
                }
            },
            editPosition () {
                router.push(`/update/${this.$route.params.id}`)
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="sass" scoped>
    #position-detail {
        &-expired {
            margin-left: 6px;
        }
        &-stamp {
            position: absolute;
            left: 45%;
            top: 0;
        }
    }
    .position-detail {
        &-title {
            display: block;
            font-size: 1.2em;
            line-height: 2em;
            color: black;
            font-weight: bold;
            margin-top: 1em;
        }
        &-content {
            display: block;
            margin-left: 3em;
        }
        &-note {
            height: 2em;
            color: black;
            display: inline-block;

            &-left {
                width: 40%;
            }
        }
        &-edit {
            margin: 0 auto;
            display: block;
            width: 10em;
            margin-top: 4em;
        }
    }
</style>